<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link href="../../../static/plugin/jsoneditor/jsoneditor.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="childrenBody">
	<form class="layui-form" lay-filter="formTest" id="form" style="width: 80%;">

		<div class="layui-form-item layui-row layui-col-xs12">

			<label class="layui-form-label">所属部门</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" id="dname" readonly lay-verify="required" placeholder=""> <input type="hidden" name="did" id="did">
			</div>
			<a class="layui-btn" id="btn_treeSelect">选择</a>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">岗位名称</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="name" lay-verify="required" maxlength="32" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">排序</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="sort" maxlength="2" lay-verify="required|number" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea placeholder="" class="layui-textarea" name="remarks"></textarea>
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">薪酬表达式</label>
			<div class="layui-input-block">
				<!-- <textarea placeholder="" class="layui-textarea" id="expression"name="expression"></textarea> -->
				<input type="hidden" class="layui-input" id="expression" name="expression" placeholder="">
				<div id="expressionJsonEdit"></div>
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">薪酬公式</label>
			<div class="layui-input-block">
				<!-- <textarea placeholder="" class="layui-textarea" id="formula"name="formula"></textarea> -->
				<input type="hidden" class="layui-input" id="formula" name="formula" placeholder="">
				<div id="formulaJsonEdit"></div>
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
			</div>
		</div>
	</form>
	<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
	</div>
	<script type="text/javascript" src="../../../static/plugin/jsoneditor/jsoneditor.js"></script>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript">
		layui.use([ 'form', 'layer' ], function() {
			// jsoneditor
			var options = {
				mode : 'code',
				modes : [ 'code', 'text' ]
			};
			var expressionDiv = document.getElementById('expressionJsonEdit');
			var formulaDiv = document.getElementById('formulaJsonEdit');
			var expressionJsonEdit = new JSONEditor(expressionDiv, options);
			var formulaJsonEdit = new JSONEditor(formulaDiv, options);
			var $ = layui.jquery;
			var form = layui.form;
			var layer = layui.layer;
			var toUpdateApi = "../../../system/post/toUpdate";
			var toInsertApi = "../../../system/post/toInsert";
			var insertApi = "../../../system/post/insert";
			var updateApi = "../../../system/post/update";
			var insertMethod = "post";
			var updateMethod = "put";
			var url = insertApi;
			var method = insertMethod;

			//ztree
			var setting = {
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onClick : onClick
				}
			};
			function onClick(e, treeId, treeNode) {
				$("#did").val(treeNode.id);
				$("#dname").val(treeNode.name);
				hideMenu();
			}
			function showMenu() {
				var cityObj = $("#dname");
				var cityOffset = $("#dname").offset();
				$("#treeDiv").css({
					left : cityOffset.left + "px",
					top : cityOffset.top + cityObj.outerHeight() + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#treeDiv").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
					hideMenu();
				}
			}
			$("#btn_treeSelect").click(function() {
				showMenu()
			})

			var id = getUrlParam("id");
			if (id) {
				//更新
				$("#form").append("<input type='hidden' name='pid' value='' >");
				$("#form").append("<input type='hidden' name='level' value='' >");
				$("#form").append("<input type='hidden' name='id' value='' >");

				method = updateMethod;
				url = updateApi;
				loadAjax( toUpdateApi + "/" + id, "get", null, function(response) {
					baseCallBack(response, function(response) {
						fomrVal(form, "formTest", response.data.record);
						if (response.data.department) {
							$("#dname").val(response.data.department.name);
						}
						$.fn.zTree.init($("#departmentTree"), setting, response.data.ztreeBeans);
						if(response.data.record.expression){
							expressionJsonEdit.set($.parseJSON(response.data.record.expression));
							formulaJsonEdit.set($.parseJSON(response.data.record.formula));
						}
					
					});
				});
			} else {
				//新增
				var pid = getUrlParam("pid");
				if (!pid) {
					$("#form").append("<input type='hidden' name='level' value='1' >");
				} else {
					var level = getUrlParam("level");
					$("#form").append("<input type='hidden' name='pid' value='" + pid + "' >");
					$("#form").append("<input type='hidden' name='level' value='" + (parseInt(level) + 1) + "' >");
				}
				loadAjax( toInsertApi, "get", null, function(response) {
					baseCallBack(response, function(response) {
						$.fn.zTree.init($("#departmentTree"), setting, response.data);
					});
				});
			}
			form.on("submit(submit)", function(data) {
				var expressionJson = expressionJsonEdit.get();
				var formulaJson = formulaJsonEdit.get();
				$("#expression").val(JSON.stringify(expressionJson, null, 2));
				$("#formula").val(JSON.stringify(formulaJson, null, 2));
				loadAjax( url, method, $("#form").serialize(), function(response) {
					baseCallBack(response, parentReloadCallBack);
				});
				return false;
			})
		})
	</script>
</body>
</html>